<!-- 学社 - 动态 - 发布动态 -->
<template>
  <view>
    <z-navbar title="发布动态" :border-bottom="true"></z-navbar>
    <view class="pt-5 px-4">
      <!-- 添加按钮 -->
      <view class="flex flex-wrap">
        <view class="btn mr-2 mb-3"
          @click="navigate(`/package_society/pages/member/list?&showCheck=true&club_id=${state.club_id}&call_ids=${state.call_ids}&fromType=trend`)">
          @社团成员
        </view>
        <view v-for="(item, index) in state.memberList" :key="index" class="btn mr-2 mb-3">
          <view class="mr-2">{{ item.user?.nickname }}</view>
          <image class="w-26 h-26" src="/static/images/home/ic_delete_round.png" @click="onDelete(index)" />
        </view>
      </view>
      <u-input v-model="state.content" type="textarea" height="450" auto-height placeholder="发布动态内容" maxlength="9999"
        placeholder-style="color: #999; fontSize: 24rpx" :custom-style="inputStyle" />
      <view class="mt-4">
        <z-file-upload ref="uploader" :file-list="images" width="144" height="144" maxCount="9" />
      </view>
    </view>
    <view class="bottom-wrap-16 bg-white">
      <u-line color="#eee" />
      <view class="flex justify-center items-center mx-4 mt-2 bg-#F4AF22 rounded-md h-68 c-#fff text-28"
        @click="onSubmit">发布动态</view>
    </view>
  </view>
</template>

<script setup>
import { navigate, showToast } from '@/common/util/uni'
import { refreshPrePage } from '@/common/util/util'
import { postDynamicAdd } from '@/common/http/module/society.js'

const uploader = ref()
const state = reactive({
  memberList: [], // 已选择的成员列表
  call_ids: [], // 已选择成员id集合
  club_id: '', // 学社id
  content: ''
})

const images = ref([])

const inputStyle = {
  borderRadius: '12rpx',
  padding: '32rpx',
  backgroundColor: '#F5F5F5'
}

// 接收成员列表
function onAccepMember (members) {
  console.log('接收成员', members);
  state.memberList = members
  state.call_ids = members.map(v => v.user_id)
}

// 删除成员
function onDelete (i) {
  state.memberList.splice(i, 1)
  state.call_ids = state.memberList.map(v => v.user_id)
}

// 发布
function onSubmit () {
  if (!state.content) {
    showToast('请填写动态内容')
    return
  }
  const images = uploader.value.getUploadedList()
  const params = {
    club_id: state.club_id,
    content: state.content,
    slideshow: images.map(v => v.url).join(','),
    call_ids: state.call_ids.join(','),
  }
  postDynamicAdd(params).then(() => {
    showToast('发布成功')
    refreshPrePage('refresh')
    setTimeout(() => uni.navigateBack(), 600)
  })
}

onLoad((options) => {
  state.club_id = options.club_id
  if (options.image) {
    images.value = [{ url: decodeURIComponent(options.image) }]
  }
})

defineExpose({ onAccepMember })
</script>

<style lang="scss" scoped>
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 32rpx;
  background-color: #F6F6F6;
  border-radius: 12rpx;
  color: #F4AF22;
  font-size: 28rpx;
}
</style>
